<template>
<div>


<el-container  >
	<el-main style="padding:10px;" :style="{height: offsetheight  + 'px'}"
	class="text-center"
	>
		<vue2-org-tree
		  :data="data"
		  :horizontal="horizontal"
		  :collapsable="collapsable"
		  :label-class-name="labelClassName"
		  :render-content="renderContent"
		  @on-expand="onExpand"
		  @on-node-click="onNodeClick"
		></vue2-org-tree>


		<div class="a1 pointer" @click="back">
			<img src="@/assets/back.png" width="18" height="18">
		</div>
	</el-main>
</el-container>

<el-row class="text-center">
<el-radio-group v-model="activeName2" size="mini" >
	<el-radio-button label="info">详细信息</el-radio-button>
	<el-radio-button label="question">问题线索</el-radio-button>
	<el-radio-button label="user">网格员</el-radio-button>
	<el-radio-button label="company">企业单位</el-radio-button>
</el-radio-group>
</el-row>

<el-container  >
	<el-main style="padding:10px;" :style="{height: offsetheight + 'px'}">
		<info v-if="activeName2 == 'info'"
	  	:gridid="current.id"
	  	v-on:getpoint="getpoint"
	  	></info>

		<question v-if="activeName2 == 'question'"
	  	:gridid="current.id"
	  	v-on:getpoint="getpoint"
	  	></question>

	  	<user v-if="activeName2 == 'user'"
	  	:gridid="current.id"
	  	v-on:getpoint="getpoint"
	  	></user>

	  	<company v-if="activeName2 == 'company'"
	  	:gridid="current.id"
	  	v-on:getpoint="getpoint"
	  	></company>
	</el-main>
</el-container>

</div>
</template>

<script>


import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

import question from './question'
import user from './user'
import company from './company'
import info from './info'

export default {
	
	name : 'grid111',
	
	data () {
		return {
		  	// props : {
		  	// 	label : 'name',
		  	// 	children: 'children',
		  	// },

		  	data : {},

		  	current : {
		  		id : '1',
		  	},

			horizontal: false,
			collapsable: false,
			expandAll: true,
			labelClassName: 'bg-white',

			offsetheight : (document.documentElement.clientHeight - 220) * 0.5 ,

			activeName2 : 'info',



		}
	},

	props : {

	},

	components : {
		Vue2OrgTree,
		question,
		user,
		company,
		info,
	},

	computed : {
		
	},

	methods : {
		init() {
			this.$http({
                //fun: 'overviewList',
                fun: 'subGrideNoList',
                id : this.current.id,
                cb: res => {
                	console.log('subGrideNoList');
                	console.log(res);
					const result = this.$util.transData(res, 'id', 'parent_id', 'children');
					this.data = result[0];
					this.current = this.data;
					this.$emit('showgrid', this.current);
					console.log('this.data');
					console.log(this.data);
                }
            });
		},

		renderContent (h, data) {
			return data.name;// + (data.name ? data.name : '');
		},

		onExpand (data) {
			if ('expand' in data) {
				data.expand = !data.expand
				if (!data.expand && data.children) {
					this.collapse(data.children)
				}
			} else {
				this.$set(data, 'expand', true)
			}
		},

		onNodeClick (e, data) {
			console.log('onNodeClick');
			console.log(data);
			this.$emit('showgrid', data);
			this.current = data;

			this.init();
		},

		collapse (list) {
            var _this = this
            list.forEach(function(child) {
              if (child.expand) {
                child.expand = false
              }
              child.children && _this.collapse(child.children)
            })
        },

        expandChange () {
			this.toggleExpand(this.data, this.expandAll)
		},

		toggleExpand (data, val) {
            var _this = this
            if (Array.isArray(data)) {
              data.forEach(function(item){
                _this.$set(item, 'expand', val)
                if (item.children) {
                  _this.toggleExpand(item.children, val)
                }
              })
            } else {
              this.$set(data, 'expand', val)
              if (data.children) {
                _this.toggleExpand(data.children, val)
              }
            }
        },

        getpoint (item) {
        	console.log(item);
        	this.$emit('getpoint', item);
        },


        back () {
        	this.current.id = this.current.parent_id;
        	this.init();

        	
        },

	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scope>
.a1 {
	position: absolute;
	top : 70px;
	left : 370px;
	/*background-color: #2092ab;*/
	/*padding: 0 10px;*/
}


</style>
